<template>
  <div class="staff-select-item-wrap">
    <el-checkbox :disabled="isLock" :value="isActive || isLock" @change="checkFun">
      <div class="user-info-box">
        <el-avatar :size="40" :src="info.avatar" @error="errorHandler">
          <img :src="adminIcon" alt="">
        </el-avatar>
        <div class="user-info">
          <span class="name">{{ info.userName }}</span>
          <span v-if="hasKey('isRole')" class="post">{{ info.dept }}</span>
          <span v-else class="post">{{ info.post }}</span>
        </div>
      </div>
    </el-checkbox>
  </div>
</template>
<script>
import adminIcon from '@/assets/user-avatar.png';
export default {
  name: 'StaffSelectItem',
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      adminIcon,
      lockIds: []
    };
  },
  computed: {
    isLock() {
      if (this.lockIds && this.lockIds.length) {
        return this.lockIds.includes(Number(this.info.id.slice(this.info.id.indexOf('_') + 1)));
      } else {
        return false;
      }
    }
  },
  mounted() {
    if (localStorage.getItem('sendersLockIds')) {
      this.lockIds = JSON.parse(localStorage.getItem('sendersLockIds') || []);
    } else {
      this.lockIds = [];
    }
  },
  methods: {
    hasKey(key) {
      return this.info.hasOwnProperty(key);
    },
    errorHandler() {
      return true;
    },
    checkFun(val) {
      this.$emit('check', { isChecked: val, item: this.info });
    }
  }
};
</script>
<style lang="scss" scoped>
.staff-select-item-wrap {
  display: flex;
  align-items: center;
  padding: 12px 0;
  padding-left: 24px;
  .el-checkbox {
    flex: 1;
    display: flex;
    cursor: pointer;
    align-items: center;
  }
  .user-info-box {
    display: flex;
    align-items: center;
    margin-left: 0px;
  }
  .user-info {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    .name {
      display: inline-block;
      max-width: 200px;
      color: #333333;
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 4px;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap;
    }
    .post {
      display: inline-block;
      max-width: 200px;
      color: #999;
      font-size: 12px;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap;
    }
  }
}
.staff-select-item-wrap:hover {
  background-color: #F5F5F5;
}
</style>
